<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>中国传统文化网</title>
  <link rel="stylesheet" href="css/swiper.css">
  <link rel="stylesheet" href="css/index.css">

</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <a href="index.html">
      <img src="images/logo.jpg" alt="">
    </a>
  </div>
  <!-- 头部 -->

  <!-- 导航 -->
  <div class="nav">
    <div class="main">
      <ul>
        <li class="active">
          <a href="index.html">首页</a>
        </li>
        <li>
          <a href="toutiao.html">头条</a>
        </li>
        <li>
          <a href="dongtai.html">动态</a>
          <div class="slide_down">
            <a href="dongtai.html">&diamondsuit; &nbsp;国内动态</a>
            <a href="dongtai.html">&diamondsuit; &nbsp;国外动态</a>
          </div>
        </li>
        <li>
          <a href="tuzhi.html">图志</a>
        </li>
        <li>
          <a href="jieri.html">节日</a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 导航 -->


  <!-- 轮播图 -->
  <div class="box2">
    <div class="swiper mySwiper2">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="images/1.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/2.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/3.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/4.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/5.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/6.jpeg" />
        </div>

      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <div thumbsSlider="" class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="images/1.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/2.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/3.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/4.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/5.jpeg" />
        </div>
        <div class="swiper-slide">
          <img src="images/6.jpeg" />
        </div>

      </div>
    </div>

  </div>
  <!-- 轮播图 -->


  <!-- 戏曲回放 -->
  <div class="box1">

    <div class="info">
      <div class="box1_in">
        <div class="text">
          <img src="images/xq1.jpg" alt="">
          <p>彩云之南飞来“雀之灵”，杨丽萍再现经典舞台</p>
        </div>

      </div>
      <div class="mask">
        <img src="images/icon_video.png" class="icon_video1" alt=""> 集锦 / 回放
      </div>
    </div>

    <div class="info">
      <div class="box1_in">
        <div class="text">
          <img src="images/xq2.jpg" alt="">
          <p>
            青年小剧场人正成熟:要大胆，也要有温度
          </p>
        </div>

      </div>
      <div class="mask">
        <img src="images/icon_video.png" class="icon_video1" alt=""> 集锦 / 回放
      </div>
    </div>
    <div class="info">
      <div class="box1_in">
        <div class="text">
          <img src="images/xq3.jpg" alt="">
          <p>
            让文化自信种子早早播撒在孩子心中</p>
        </div>

      </div>
      <div class="mask">
        <img src="images/icon_video.png" class="icon_video1" alt=""> 集锦 / 回放
      </div>
    </div>
    <div class="info">
      <div class="box1_in">
        <div class="text">
          <img src="images/xq4.png" alt="">
          <p>81场精彩演出 “大戏看北京 云端演出周”启幕</p>
        </div>

      </div>
      <div class="mask">
        <img src="images/icon_video.png" class="icon_video1" alt=""> 集锦 / 回放
      </div>
    </div>
  </div>
  <!-- 戏曲回放 -->

  <!-- 文化大全 -->
  <div class="box3">
    <div class="main">
      <div class="tit_box">
        <div class="tit">
          <img src="images/icon2.png" class="icon2" alt="">
          文化大全
          <img src="images/icon1.png" class="icon1" alt="">
        </div>

      </div>

      <div class="box3_content">
        <div class="box3_l">
          <img src="images/tit1.jpg" alt="">

          <div class="l_info">
            <div class="pic">
              <img src="images/wh1.jpg" alt="">
            </div>
            <p>
              文化和旅游部开展戏曲教育数据采集工作
            </p>
          </div>
        </div>
        <div class="box3_r">
          <div class="r_info">
            <div class="pic">
              <img src="images/wh2.jpg" alt="">
            </div>
            <p>
              守艺中华：发掘手艺背后的匠心与光阴
            </p>
          </div>
          <div class="r_info">
            <div class="pic">
              <img src="images/wh3.png" alt="">
            </div>
            <p>
              沁河古堡群：文气浸入烟火气
            </p>
          </div>
          <div class="r_info">
            <div class="pic">
              <img src="images/wh4.jpg" alt="">
            </div>
            <p>
              深耕文化土壤，助力文创升级
            </p>
          </div>
          <div class="r_info">
            <div class="pic">
              <img src="images/wh5.png" alt="">
            </div>
            <p>
              点石成色 溢彩千年——浅谈敦煌壁画的石色妙用
            </p>
          </div>
          <div class="r_info">
            <div class="pic">
              <img src="images/wh6.jpg" alt="">
            </div>
            <p>
              从《敦煌山水画史》探寻中国山水画源头
            </p>
          </div>
          <div class="r_info">
            <div class="pic">
              <img src="images/wh7.png" alt="">
            </div>
            <p>
              非遗传承人和他的“银匠村”
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 文化大全 -->


  <!-- 页脚 -->
  <div class="foot_top">
    <div class="main">
      <ul>
        <li class="links1">
          <h3>动态</h3>
          <a href="#">国内动态</a>
          <a href="#">国际动态</a>
        </li>
        <li class="links2">
          <h3>专题</h3>
          <a href="#">欢乐春节</a>
          <a href="#">图志</a>
          <a href="#">其他</a>
        </li>
        <li class="links3">
          <h3>资源在线</h3>
          <a href="#">世界各地</a>
          <a href="#">中国各地</a>
          <a href="#">政策 · 文献</a>
        </li>
        <li class="links4">
          <h3>分类搜索</h3>
          <a href="#">按地区</a>
          <a href="#">按时间</a>

        </li>
      </ul>
    </div>
  </div>

  <div class="foot_btm">
    <div class="main">
      <div class="left">
        <img src="images/logo.jpg" alt="">

      </div>

      <div class="right">
        <p>主办：中华人民共和国文化和旅游部国际交流与合作局（港澳台办公室）</p>
        <p>地址：北京市朝阳门北大街10号 100020</p>
        <p>承办：中外文化交流中心</p>
      </div>

      <div class="clear"></div>
    </div>
  </div>
  <!-- 页脚 -->


</body>

<script src="js/jquery.min.js"></script>
<script src="js/swiper.js"></script>
<script>
  var swiper = new Swiper(".mySwiper", {
    spaceBetween: 10,
    slidesPerView: 6,
    freeMode: true,
    watchSlidesProgress: true,
    autoplay: true,
  });
  var swiper2 = new Swiper(".mySwiper2", {
    spaceBetween: 10,
    autoplay: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiper,
    },
  });
</script>

</html>